<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :destroyOnClose="true"
    @ok="handleOk"
    @cancel="close"
    cancelText="关闭"
  >
    <template slot="footer">
      <a-button type="primary" style="padding-left: 8px; padding-right: 8px" @click="clearModel"> 清除条件 </a-button>
      <a-button style="padding-left: 8px; padding-right: 8px" @click="close"> 关闭</a-button>
      <a-button type="primary" style="padding-left: 8px; padding-right: 8px" @click="handleOk"> 确定</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <div style="margin: 0 auto" :class="{ isCheck: isCheck }">
        <a-radio-group v-model="model.timeType" @change="changeTimeType" style="width: 100%">
          <table class="table table-striped table-bordered" align="center" valign="center">
            <tr>
              <td class="column" colspan="1">账套/核算单元</td>
              <td class="value" colspan="3">
                <a-input @click.native="openOrganModel" v-model="model.accName" readOnly placeholder="请选择" />
              </td>
            </tr>
            <tr>
              <td class="column">
                <a-radio :value="1">按期间</a-radio>
              </td>
              <td class="value">
                <a-month-picker
                  :disabled="model.timeType != 1"
                  style="width: 100%"
                  format="YYYY-MM"
                  valueFormat="YYYY-MM"
                  placeholder="请选择期间"
                  v-model="model.startTime"
                />
              </td>
              <td class="column" style="text-align: center">至</td>
              <td class="value">
                <a-month-picker
                  :disabled="model.timeType != 1"
                  style="width: 100%"
                  format="YYYY-MM"
                  valueFormat="YYYY-MM"
                  placeholder="请选择期间"
                  v-model="model.endTime"
                />
              </td>
            </tr>
            <tr>
              <td class="column">
                <a-radio :value="2">按日期</a-radio>
              </td>
              <td class="value">
                <j-date :disabled="model.timeType != 2" style="width: 100%" v-model="model.startTime"></j-date>
              </td>
              <td class="column" style="text-align: center">至</td>
              <td class="value">
                <j-date :disabled="model.timeType != 2" style="width: 100%" v-model="model.endTime"></j-date>
              </td>
            </tr>

            <tr>
              <td class="column">科目编号</td>
              <td class="value" colspan="4">
                <a-tree-select
                  v-model="model.subjectCode"
                  tree-data-simple-mode
                  show-search
                  style="width: 100%"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  placeholder="请选择"
                  :tree-data="subjectTreeData"
                  :loadData="onLoadData"
                  @select="onSelectSubjectRadio"
                  allow-clear
                />
              </td>
            </tr>
            <!-- <tr>
              <td class="column">查询类型</td>
              <td class="value" colspan="4">
                <j-dict-select-tag
                  style="width: 100%"
                  v-model="model.queryType"
                  placeholder="请选择查询类型"
                  dictCode="queryType"
                />
              </td>
            </tr> -->
          </table>
        </a-radio-group>
      </div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :row-selection="rowSelection"
        :customRow="handleClickRow"
        :row-class-name="tableRowClassName"
        style="height: 275px; overflow-x: hidden; overflow-y: auto; width: 93%; margin-left: 7%"
      >
      </a-table>
    </a-spin>

    <CheckOrganModal ref="departModal" @ok="updateQueryParam"></CheckOrganModal>
    <ProjectModal ref="modalForm" @onSelect="onSelect"></ProjectModal>
  </a-modal>
</template>

<script>
import { postAction, getAction } from '@/api/manage'
import ProjectModal from './ProjectModal.vue'
import CheckOrganModal from '../testcomponent/CheckOrganModal'
import { SearchModalMixin } from '../mixins/SearchModalMixin'
import moment from 'moment'
import columns from './SearchColumns.js'
export default {
  name: 'SearchModel',
  mixins: [SearchModalMixin],
  components: {
    CheckOrganModal,
    ProjectModal,
  },
  data() {
    return {
      title: '科目余额表查询条件',
      visible: false,
      model: {
        accCode: '',
        accName: '',
        startTime: moment().format('YYYY-MM-01'),
        endTime: moment().format('YYYY-MM-') + moment().daysInMonth(),
        timeType: 2,
        assistCode: '',
        assistType: '',
      },
      isCheck: false,
      confirmLoading: false,
      subjectTreeData: [],
      columns: columns(this),
      dataSource: [],
      firstRecord: [],
      url: {
        list: '/sjyzzx/sjZxzyAssistAccount/queryAssistList',
        edit: '/investigateSasac/edit',
        subjectTree: '/sjyzzx/sjZxzyAccountSubject/querySubjectTree',
      },
      checkedRows: [],
      checkedKeys: ['1'],
    }
  },
  created() {
    this.getSubjectTree()
    this.getActionData()
  },
  computed: {
    rowSelection() {
      return {
        type: 'radio',
        getCheckboxProps: (record) => {
          if (this.checkedKeys.includes(record.id)) {
            record.index = 0
            this.firstRecord = Object.assign({}, record)
            this.checkedRows = [{ ...record }]
            this.model.assistType = record.assistCode
          }
          return {
            props: {
              // disabled: record.name === 'Disabled User',
              // name: record.name,
              defaultChecked: this.checkedKeys.includes(record.id), // 该属性用于默认勾选处理
            },
          }
        },
        selectedRowKeys: this.checkedKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.ProCessAssistName()
          this.reportIds = []
          this.checkedKeys = selectedRowKeys
          this.checkedRows = selectedRows
          this.model.assistType = selectedRows[0].assistCode
          console.log(`selectedRowKeys: ${selectedRowKeys}`, this.model)
        },
      }
    },
  },
  methods: {
    handleClickRow(record, index) {
      return {
        on: {
          click: () => {
            console.log(111, record)
            if (this.checkedKeys != [] && this.checkedKeys[0] == record.id) {
              this.openSearchModel(record)
            }
          },
        },
      }
    },
    clearModel() {
      this.model = this.$options.data().model
      this.$emit('clear')
      this.ProCessAssistName()
      this.checkedRows = [{ ...this.firstRecord }]
      this.checkedKeys = this.$options.data().checkedKeys
    },
    ProCessAssistName(val = { assCode: '', assName: '' }) {
      let index = this.dataSource.findIndex((item) => item.id == this.checkedRows[0].id)
      console.log(index)
      this.dataSource[index].assistItemCode = val.assCode
      this.dataSource[index].assistItemName = val.assName
      this.$emit('onSelectAssist', '')
    },
    openSearchModel(record) {
      this.$refs.modalForm.edit(record)
      this.$refs.modalForm.isCheck = false
      this.$refs.modalForm.disableSubmit = false
    },
    onSelect(val) {
      let index = this.dataSource.findIndex((item) => item.id == this.checkedRows[0].id)
      let assistCode = val.assCode
      this.dataSource[index].assistItemCode = val.assCode
      this.dataSource[index].assistItemName = val.assName
    },
    handleOk() {
      console.log(this.model)
      // if (this.model.subjectCode == undefined || this.model.subjectCode == '' || this.assistCode == '') {
      //   this.$message.warning('请选择辅助类别和科目!')
      //   return
      // }
      let { startTime, endTime } = this.model
      if (this.compareTime(startTime, endTime)) {
        this.$emit('ok', this.model)
        this.visible = false
      }
    },
    openOrganModel() {
      this.$refs.departModal.edit()
    },
    getActionData() {
      getAction(this.url.list)
        .then((res) => {
          if (res.success) {
            this.dataSource = res.result
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch((err) => {})
    },
    changeTimeType(e) {
      if (e.target.value == 1) {
        this.model.startTime = moment().format('YYYY-MM')
        this.model.endTime = moment().format('YYYY-MM')
      } else {
        this.model.startTime = moment().format('YYYY-MM-01')
        this.model.endTime = moment().format('YYYY-MM-') + moment().daysInMonth()
      }
    },
    tableRowClassName(record, index) {
      // record.index = index
    },
  },
}
</script>

<style scoped>
</style>
<style lang="less" scoped>
@import '../../../css/checkAndEditNoBorder.less';
.table-bordered /deep/ .ant-col-sm-16 {
  width: 100%;
}
.right {
  .main {
    padding: 10px;
    background-color: #f1f5ff;
  }
}
.box {
  padding: 20px;
}
</style>